<template>
  <div class="app-container jklis">
    <div class="zdy-main">
      <el-form ref="queryForm" :inline="true" class="zdy-form search-form-new" label-width="68px">
        <el-form-item>
          <!-- <el-button icon="el-icon-plus" type="primary" size="mini" @click="addACount"
            class="zdy-btn zdy-btn-refresh">新增模板</el-button> -->
          <el-button icon="el-icon-refresh" type="primary" size="mini" @click="getNowTemplate">同步模版</el-button>
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table :data="tableData.records">
          <el-table-column label="序号" prop="id" width="50"> </el-table-column>
          <el-table-column label="模板名称" prop="templateName"> </el-table-column>
          <el-table-column label="模板ID" prop="contractNo" min-width="150" />
          <el-table-column label="模板链接" prop="actorContents" min-width="200">
            <template slot-scope="scope">
              <div>
                <a style="color: cornflowerblue;" :href="scope.row.templateUrl" target="_blank" rel="noopener noreferrer">{{ scope.row.templateUrl }}</a>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="时间" prop="createTime" width="160" />
          <el-table-column label="类型" prop="bussinessType">
            <template slot-scope="scope">
              <div>
                <el-tag :type="commonMaps.hetongTypeMap[scope.row.bussinessType||0].type">{{ commonMaps.hetongTypeMap[scope.row.bussinessType||0].name }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="bussinessType">
            <template slot-scope="scope">
              <div>
                <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
                <el-tag type="danger" v-if="scope.row.status!=1">停用</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="viewModel(scope.row.templateUrl)">查看</el-button>
              <el-button type="text" size="mini" @click="set(scope.row)">设置</el-button>
              <el-button type="text" style="color: red" size="mini" @click="delItem(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages-box">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-sizes="[1,10, 20, 30, 40, 50, 60]" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"></el-pagination>
      </div>

    </div>
    <modelSet ref="modelSet"></modelSet>
  </div>
</template>

<script>
import fadadaApi from "../../api/B2Cmanage/fadada";
import modelSet from "./modelSet.vue";
export default {
  name: "financial",
  components: { modelSet },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
      },
      typeMap: {
        0: "未配置",
        1: "入驻协议",
        2: "回收合同",
        3: "转让合同(长明)",
      },
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      loading: false,
    };
  },
  created() {
    this.getList();
    // this.getTypeList();
  },
  activated() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      this.tableData.records = [];
      this.loading = true;
      let obj = this.queryParams;
      fadadaApi
        .getAiqianModelList(obj)
        .then((response) => {
          // console.log("%c Line:111 🥑 response", "color:#42b983", response);
          this.$nextTick(() => {
            this.loading = false;
            this.tableData.records = response.rows;
            this.tableData.total = response.total;
          });
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 同步模板
    getNowTemplate() {
      fadadaApi.getAiqianNowTemplate().then((res) => {
        this.queryParams.pageNum = 1;
        this.getList();
      });
    },
    // 设置模板
    set(row) {
      this.$refs.modelSet.open(row);
    },

    // 新增
    addACount() {
      let url = window.location.href;
      fadadaApi.getAddModelUrl({ redirectUrl: url }).then((res) => {
        console.log("%c Line:110 🎂 res", "color:#b03734", res);
        if (res.code == 200) {
          window.open(res.msg);
        }
      });
    },
    // 查看
    viewModel(url) {
      // 查看详情
      window.open(url);
      // let obj = {
      //   signTemplateId: row.signTemplateId
      // }
      // fadadaApi.reviewModelDetail(obj).then(res => {
      //   console.log("%c Line:110 🎂 res", "color:#b03734", res);
      //   if (res.code == 200) {
      //     window.open(res.msg)
      //   }
      // })
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fadadaApi.delmodel(row.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.model-cont-item {
  border-bottom: 1px solid #ccc;
}
</style>
